<template>
  <div class="home" ref="chart">
    <LineChart :xData="xData" :yData="yData"></LineChart>
  </div>
</template>

<script>
//第一步引入echarts
// import * as echarts from "echarts";

import  LineChart from '@/components/line/LineChart.vue'

import { orderTotaldata } from "@/api/home.api.js";

export default {
  components:{
    LineChart
  },
  data() {
    return {
      xData: [],
      yData: [],
    };
  },
  // methods: {
  //   draw() {
  //     //第二步 初始化 echarts
  //     var myChart = echarts.init(this.$refs.chart);

  //     //第三步绘制图表
  //     myChart.setOption({
  //       title: {
  //         text: "ECharts 入门示例",
  //       },
  //       tooltip: {},
  //       xAxis: {
  //         data: this.xData,
  //       },
  //       yAxis: {},
  //       series: this.yData.map((item) => {
  //         item.type;
  //         return item;
  //       }),
  //     });
  //   },
  // },
  created() {
    orderTotaldata().then((res) => {
      console.log(res);

      this.xData = res.data.xData;
      this.yData = [
        
        {
          // 销量
          name: "销量",
          // type: "line",
          areaStyle: {},
          data: res.data.orderData,
        },

        {
          // 营业额
          name: " 营业额",
          // type: "line",
          areaStyle: {},
          data: res.data.amountData,
        },
      ];

      // this.draw();

      //   var myChart = echarts.init(this.$refs.chart);

      //   myChart.setOption({
      //     title: {
      //       text: "ECharts 入门示例",
      //     },
      //     tooltip: {},
      //     xAxis: {
      //       data: this.xData,
      //     },
      //     yAxis: {},
      //     series: this.yData.map((item) => {
      //       item.type;
      //       return item;
      //     }),
      //   });
    });
  },

  //   mounted() {
  //
  //   },
};
</script>

<style lang="less" scoped>
.home {

  height: 500px;
}
</style>